<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <NewCard title="专家认证">
            <!-- 认证步骤 -->
            <div class="tabOne">
              <!-- 1 -->
              <div
                class="tablist"
                :class="[
                  presentStep == 1 ? 'isActive' : '',
                  presentStep > 1 ? 'isOk' : '',
                ]">
                <i class="tabNum">1</i>
                <i class="el-icon-circle-check"></i>
                <el-button round>类型</el-button>
              </div>
              <b
                :class="[
                  presentStep == 1 ? 'isActive' : '',
                  presentStep > 1 ? 'isOk' : '',
                ]"></b>
              <!-- 2 -->
              <div
                class="tablist"
                :class="[
                  presentStep == 2 ? 'isActive' : '',
                  presentStep > 2 ? 'isOk' : '',
                ]">
                <i class="tabNum">2</i>
                <i class="el-icon-circle-check"></i>
                <el-button round>材料</el-button>
              </div>
              <b
                :class="[
                  presentStep == 2 ? 'isActive' : '',
                  presentStep > 2 ? 'isOk' : '',
                ]"></b>
              <!-- 3 -->
              <div
                class="tablist"
                :class="[
                  presentStep == 3 ? 'isActive' : '',
                  presentStep > 3 ? 'isOk' : '',
                ]">
                <i class="tabNum">3</i>
                <i class="el-icon-circle-check"></i>
                <el-button round>审核</el-button>
              </div>
              <b
                :class="[
                  presentStep == 3 ? 'isActive' : '',
                  presentStep > 3 ? 'isOk' : '',
                ]"></b>
              <!-- 4 -->
              <div class="tablist" :class="presentStep == 4 ? 'isActive' : ''">
                <i class="tabNum">4</i>
                <i class="el-icon-circle-check"></i>
                <el-button round>结果</el-button>
              </div>
            </div>

            <!-- 选择类型 -->
            <div class="selectType" v-if="presentStep == 1">
              <ul>
                <!-- <li
                  v-for="(type, index) in expertTypeList"
                  :key="index"
                  :class="type.id == selectRadio ? 'isActive' : ''">
                  <div class="selectList">
                    <img :src="type.icon" alt="" />
                    <div class="selectTxt">
                      <h3>{{ type.name }}</h3>
                      <p>{{ type.describable }}</p>
                    </div>
                  </div>
                  <el-radio v-model="selectRadio" :label="type.id"></el-radio>
                </li> -->

                <!-- 写死的三个专家类型 -->
                <li
                  v-for="(type, index) in typeList"
                  :key="index"
                  :class="type.type == selectRadio ? 'isActive' : ''">
                  <div class="selectList">
                    <img src="~@/assets/images/fw_icon.png" alt="" />
                    <div class="selectTxt">
                      <h3>{{ type.name }}</h3>
                      <p>{{ type.describable }}</p>
                    </div>
                  </div>
                  <el-radio v-model="selectRadio" :label="type.type"></el-radio>
                </li>
              </ul>
              <div class="subBtn">
                <el-button round class="nextBtn" @click="typeNext">填写材料</el-button>
              </div>
            </div>

            <!-- 填写材料 -->
            <div class="datum" v-else-if="presentStep == 2">
              <ul>
                <li
                  :class="[
                    datumStep == 1 ? 'isActive' : '',
                    datumStep > 1 ? 'isOk' : '',
                  ]">
                  <div class="datumIcon">
                    <svg-icon icon-class="ly_icon" />
                    <i class="el-icon-success"></i>
                  </div>
                  <p>擅长领域</p>
                </li>
                <li
                  :class="[
                    datumStep == 2 ? 'isActive' : '',
                    datumStep > 2 ? 'isOk' : '',
                  ]">
                  <div class="datumIcon">
                    <svg-icon icon-class="grxx_icon" />
                    <i class="el-icon-success"></i>
                  </div>
                  <p>个人信息</p>
                </li>
                <li
                  :class="[
                    datumStep == 3 ? 'isActive' : '',
                    datumStep > 3 ? 'isOk' : '',
                  ]">
                  <div class="datumIcon">
                    <svg-icon icon-class="zs_icon" />
                    <i class="el-icon-success"></i>
                  </div>
                  <p>个人证书</p>
                </li>
                <li
                  :class="[
                    datumStep == 4 ? 'isActive' : '',
                    datumStep > 4 ? 'isOk' : '',
                  ]">
                  <div class="datumIcon">
                    <svg-icon icon-class="gzjl_icon" />
                    <i class="el-icon-success"></i>
                  </div>
                  <p>工作经历</p>
                </li>
                <li
                  :class="[
                    datumStep == 5 ? 'isActive' : '',
                    datumStep > 5 ? 'isOk' : '',
                  ]">
                  <div class="datumIcon">
                    <svg-icon icon-class="jy_icon" />
                    <i class="el-icon-success"></i>
                  </div>
                  <p>教育经历</p>
                </li>
                <li
                  :class="[
                    datumStep == 6 ? 'isActive' : '',
                    datumStep > 6 ? 'isOk' : '',
                  ]">
                  <div class="datumIcon">
                    <svg-icon icon-class="fj_icon" />
                    <i class="el-icon-success"></i>
                  </div>
                  <p>相关附件</p>
                </li>
              </ul>
            </div>

            <!-- 材料审核 -->
            <div class="underReview" v-else-if="presentStep == 3">
              <h3>您的材料已成功上传，系统正在审核中...</h3>
              <p>
                审核结果将于3个工作日内发送至消息中心和<br />您的邮箱，请注意查收消息
              </p>
              <router-link to="/Bm-search/searchAnswer">
                <el-button round>返回首页</el-button>
              </router-link>
            </div>

            <!-- 审核结果 -->
            <div class="reviewResult" v-else>
              <div v-if="succeedOrLose">
                <h3>恭喜您，通过「问三师」的专家认证</h3>
                <p class="type_txt">类型：{{isCerting.type==2?"咨询专家":"项目专家"}}&nbsp;&nbsp;领域：{{isCerting.type==2 ? isCerting.consultType : isCerting.projectType}}</p>
                <p>登录<span>www.wensanshi.com</span>即可开始解答</p>
                <!-- 如果是项目专家去交付 -->
                <router-link to="/delivery/delivery-project" v-if="nowUserInfo.type == '3'">
                  <el-button round>前往解答</el-button>
                </router-link>
                <!-- 其他专家去咨询 -->
                <router-link to="/delivery/delivery-consult" v-else>
                  <el-button round>前往解答</el-button>
                </router-link>
                <router-link to="/Bm-search/searchAnswer">
                  <el-button round class="goHome">返回首页</el-button>
                </router-link>
              </div>
              <div v-else>
                <h3 style="margin-bottom: 40px">审核失败，请重新审核！</h3>
                <el-button round @click="againCheck">重新审核</el-button>
              </div>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <div class="featuredContent" v-if="isShowFc">
            <FeaturedContent></FeaturedContent>
          </div>
          <div class="datumForm" v-show="!isShowFc">
            <DatumForm
              :isEdit="isEdit"
              :userInfo="userInfo"
              :type="selectRadio"
              :datumStep="datumStep"
              @editStep="editDatumStep"
              @editPresentStep="editPresentStep"
            >
            </DatumForm>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import DatumForm from "./DatumForm";
import FeaturedContent from "@/components/FeaturedContent";
import NewCard from "@/wss/components/newCard.vue";
import {
  getExpertOfficeListApi,
  getExpertListApi,
  expertRemoveApi,
  editUserProfileExpertAuthenticationApi,
  editUserProfileRecertificationApi,
} from "@/BMViews/api/work/expert.js";
export default {
  name: "ExpertsCert",
  components: { NewCard, FeaturedContent, DatumForm },
  data() {
    return {
      isEdit: false,
      //分页参数
      pageing: { pageNum: 1, pageSize: 100 },
      presentStep: 1, //当前的步骤：1选择类型 2填写资料 3材料审核 4审核结果
      datumStep: 1, //填写资料的步骤：1擅长领域 2个人信息 3个人证书 4工作经历 5教育经历 6相关附件
      isShowFc: true, //当前是否展示true推荐内容（false显示填写资料组件）
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //头像
      selectRadio: "2", //选择的专家类型   0咨询专家 1项目专家 2编辑专家
      expertTypeList: [], // 获取的专家类型列表
      expertList: [], //获取专家的列表
      succeedOrLose: true, //审核成功还是审核失败

      typeList:[
        {
          type: '2',
          name: '咨询专家',
          describable: '帮助用户解答有关咨询的相关问题',
        },
        {
          type: '3',
          name: '项目专家',
          describable: '帮助用户解答有关项目的相关问题',
        },
        // {
        //   type: '1',
        //   name: '编辑专家',
        //   describable: '帮助用户解答有关编辑的相关问题',
        // },
      ],

      userId: "", //当前专家的userId
      id: "", //当前专家的Id
      userInfo: {}, // 获取用户信息

      nowUserInfo:[],// 当前用户的信息
      isCerting: {},//当前用户的专家信息
    };
  },
  mounted() {
    this.getExpertOfficeList(); //获取专家类型列表
    this.getUserStatus(); //获取当前用户状态:判断当前用户是处于 未认证 审核中 审核结果(失败、成功)
  },
  methods: {
    //修改填写资料的步骤
    editDatumStep(step) {
      this.datumStep = step;
    },

    //修改当前的步骤
    editPresentStep(step) {
      this.presentStep = step;
      this.isShowFc = true;
    },

    //获取专家类型列表
    async getExpertOfficeList() {
      let result = await getExpertOfficeListApi(this.pageing);
      // 1 专家类型 2 专家职称
      let type = result.rows.filter((item) => item.type.includes("1"));
      this.expertTypeList = type;
    },

    //选择专家类型后点击填写材料的回调
    typeNext() {
      if (this.selectRadio === "") {
        this.$message("请选择类型！");
      } else {
        // 关闭推荐内容
        this.isShowFc = false;
        //修改步骤为2填写资料
        this.presentStep = 2;
      }
    },

    //判断当前用户是处于 未认证 审核中 审核结果(失败、成功)
    async getUserStatus() {
      //当前专家的状态码
      // let status = this.$store.state.user.status
      //当前专家的userId
      let userId = this.$store.state.user.userId;
      //获取专家列表
      let result = await getExpertListApi(this.pageing);
      if (result.code == 200) {
        this.expertList = result.rows;
      }
      //判断当前用户id是否存在于专家认证的列表当中
      let isCerting = this.expertList.filter((item) => item.userId == userId);
      console.log(isCerting,'------------------------==========');
      this.nowUserInfo = isCerting[0]
      // console.log(isCerting);
      //当前用户存在专家认证列表中，所在专家列表中的状态码（系统用户的状态码和专家列表的状态码不一致）
      let statusCheck = "";
      //当statusCheck里有数据的时候才获取里面的专家状态码
      if (isCerting.length > 0) {
        statusCheck = isCerting[0].status;
        this.userId = isCerting[0].userId;
        this.id = isCerting[0].id;
        this.isCerting = isCerting[0] //当前用户的专家信息
      }
      if (isCerting.length == 0) {
        this.presentStep = 1;
        return;
      }
      //判断当前状态显示对应的页面
      if (statusCheck == "1") {
        this.succeedOrLose = true; //审核成功
        this.presentStep = 4; //审核成功
      } else if (statusCheck == "2") {
        this.succeedOrLose = false; //审核失败
        this.presentStep = 4; //审核失败
      } else {
        //判断当前用户id是否存在于专家认证的列表当中
        if (statusCheck != 0) {
          this.presentStep = 1; //未审核
        } else {
          this.presentStep = 3; //审核中
        }
      }
    },

    // 获取认证信息 (重新申请审核专家认证)
    async editUserProfileExpertAuthenticationFn() {
      let { code, data: userInfo } =
        await editUserProfileExpertAuthenticationApi();
      if (code != 200) return;
      this.userInfo = JSON.parse(JSON.stringify(userInfo));
      this.isEdit = true;
    },

    //删除已提交的专家认证（重新申请审核专家认证）
    // async expertRemove() {
    //   // const { id, userId } = this;
    //   // [{ id, userId }]
    // },

    //点击重新审核按钮
    againCheck() {
      //重新申请审核专家认证
      this.editUserProfileExpertAuthenticationFn();
      this.presentStep = 1;
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .label-box-content .el-card__body {
  position: relative;
  padding: 0 30px;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul,
p,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}

/* 专家认证 */
/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-top: 15px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist .tabNum {
  font-style: normal;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  border: 2px solid #c8cce2;
  border-radius: 50%;
  color: #c8cce2;
}
.tabOne .tablist .el-icon-circle-check {
  display: none;
  font-size: 30px;
  color: #c8cce2;
}
.tabOne .tablist.isActive .tabNum {
  border-color: #6A769F;
  background-color: #6A769F;
  color: #fff;
}
.tabOne .tablist.isOk .tabNum {
  display: none;
}
.tabOne .tablist.isOk .el-icon-circle-check {
  display: block;
}

.tabOne .tablist button {
  color: #9c9da6;
  font-size: 16px;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 25px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne > b {
  display: flex;
  align-items: flex-end;
}
.tabOne > b::before,
.tabOne > b::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  border-right: 0px solid transparent;
  border-left: 6px solid #c8cce2;
  margin-bottom: 15px;
  margin-right: 1px;
}
.tabOne > b.isOk::before,
.tabOne > b.isOk::after,
.tabOne > b.isActive::before,
.tabOne > b.isActive::after {
  border-left-color: #6A769F;
}

.tabOne .tablist.isActive button,
.tabOne .tablist.isOk button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #6A769F;
  border-color: #6A769F;
  /* font-weight: bold; */
}
.tabOne .tablist.isOk button {
  background-color: #D3D8E5;
  border-color: #D3D8E5;
  font-weight: 400;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}
@media (max-width: 1430px) {
  .tabOne .tablist button {
    padding: 6px 10px;
  }
}

/* 单选框 */
::v-deep .el-radio__label {
  display: none;
}
::v-deep .el-radio .el-radio__inner {
  width: 24px;
  height: 24px;
  border-color: #bbbbbb;
  background: #fff;
}
::v-deep .el-radio .is-disabled .el-radio__inner {
  background: #f2f2f2;
}
::v-deep .el-radio .is-checked .el-radio__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 11px;
  height: 7px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}

/* 选择类型 */
.selectType {
  padding: 30px 0;
}
.selectType ul {
  margin-bottom: 80px;
}
.selectType ul > li {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid #efefef;
  margin-bottom: 25px;
}
.selectType ul > li > .selectList {
  display: flex;
  align-items: center;
}
.selectType ul > li > .selectList img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-right: 16px;
}
.selectType ul > li > .selectList h3 {
  font-size: 16px;
  /* font-weight: bold; */
  color: #333;
  margin-bottom: 8px;
}
.selectType ul > li.isActive h3 {
  color: #f87a23;
}
.selectType ul > li > .selectList p {
  font-size: 12px;
  color: #999;
}
/* 按钮 */
.subBtn {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 30px;
  border-top: 1px solid #ecedf0;
  background-color: #fff;
}
.subBtn .el-button {
  padding: 0;
  width: 200px;
  padding: 10px 0;
  /* font-weight: bold; */
  color: #999;
}
.subBtn .el-button.nextBtn {
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
}
.subBtn .el-button:hover {
  border-color: #f87a23;
  color: #f87a23;
  background-color: transparent;
}
.subBtn .el-button.nextBtn:hover {
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
  opacity: 0.9;
}

/* 填写材料 */
.datum {
  margin-top: 50px;
}
.datum ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.datum ul > li {
  width: 33%;
  text-align: center;
  color: #999;
  margin-bottom: 50px;
  font-size: 16px;
}
.datum ul > li .datumIcon {
  position: relative;
}
.datum ul > li .datumIcon > i {
  display: none;
  position: absolute;
  top: 0;
  right: 36%;
  color: #f87a23;
  background-color: #fff;
  border-radius: 50%;
  z-index: 9;
}
.datum ul > li svg {
  font-size: 40px;
  color: #999;
}
.datum ul > li p {
  margin-top: 15px;
}
.datum ul > li.isOk p,
.datum ul > li.isOk svg {
  color: #666;
}
.datum ul > li.isOk .datumIcon > i {
  display: block;
}

.datum ul > li.isActive svg,
.datum ul > li.isActive {
  color: #f87a23;
  /* font-weight: bold; */
}

/* 材料审核 */
.underReview {
  text-align: center;
  margin-top: 80px;
}
.underReview h3 {
  font-size: 25px;
  color: #333;
  font-weight: bold;
}
.underReview p {
  font-size: 16px;
  color: #999;
  line-height: 30px;
  margin: 40px 0;
}
.underReview .el-button {
  padding: 10px 140px;
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
  font-weight: bold;
}
.underReview .el-button:hover {
  opacity: 0.9;
}

/* 审核结果 */
.reviewResult {
  text-align: center;
  margin-top: 80px;
}
.reviewResult h3 {
  font-size: 26px;
  color: #333;
}
.reviewResult p {
  font-size: 16px;
  color: #999;
  line-height: 30px;
  margin: 25px 0;
}
.reviewResult p.type_txt{
  font-size: 13px;
  line-height: 30px;
  margin-top: 15px;
  margin-bottom: 0px;
}
.reviewResult p > span {
  color: #f87a23;
  margin: 0 5px;
}
.reviewResult .el-button {
  display: block;
  padding: 10px 140px;
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
  font-weight: bold;
  margin: 0 auto;
}
.reviewResult .el-button.goHome {
  background-color: #fff;
  border: 2px solid #d7d7d7;
  color: #666;
  margin-top: 20px;
}
.reviewResult .el-button:hover {
  opacity: 0.9;
}
</style>
<style scoped>
/* 响应式 */
@media (max-width: 1180px) {
  .tabOne{
    /* justify-content: inherit;
    overflow-x: auto;
    overflow-y: hidden; */
  }
}
@media (max-width: 1120px) {
  
  .reviewResult{
    margin-top: 50px;
  }
  .reviewResult h3{
    font-size: 22px;
  }
  .reviewResult p{
    margin: 30px 0;
  }
  .reviewResult .el-button{
    width: 100%;
    padding: 10px 0px;
  }
}
</style>
